{% extends 'cinema/admin/base_admin.html' %}
{% load static %}

{% block title %}用户管理 - 电影院票务管理系统{% endblock %}
{% block page_title %}用户管理{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="fas fa-users me-2"></i>用户管理</h2>
        <p class="text-muted mb-0">管理系统中的所有用户账户</p>
    </div>
</div>

<!-- 筛选和搜索 -->
<div class="admin-card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <label class="form-label">状态筛选</label>
                <select class="form-select" id="statusFilter">
                    <option value="">全部状态</option>
                    <option value="active">活跃用户</option>
                    <option value="inactive">禁用用户</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">权限筛选</label>
                <select class="form-select" id="roleFilter">
                    <option value="">全部用户</option>
                    <option value="staff">管理员</option>
                    <option value="user">普通用户</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">搜索用户</label>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" id="userSearch" placeholder="搜索用户名或邮箱...">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 用户列表 -->
{% if users %}
    <div class="admin-card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>用户列表 ({{ users|length }} 个)</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>用户信息</th>
                            <th>注册时间</th>
                            <th>最后登录</th>
                            <th>订单数</th>
                            <th>状态</th>
                            <th>权限</th>
                            <th style="width: 150px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}
                            <tr data-status="{{ user.is_active|yesno:'active,inactive' }}" 
                                data-role="{{ user.is_staff|yesno:'staff,user' }}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar me-3">
                                            {% if user.userprofile.avatar %}
                                                <img src="{{ user.userprofile.avatar.url }}" 
                                                     class="rounded-circle" style="width: 40px; height: 40px; object-fit: cover;">
                                            {% else %}
                                                <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center" 
                                                     style="width: 40px; height: 40px;">
                                                    <i class="fas fa-user text-white"></i>
                                                </div>
                                            {% endif %}
                                        </div>
                                        <div>
                                            <h6 class="mb-0">{{ user.username }}</h6>
                                            <small class="text-muted">{{ user.email }}</small>
                                            {% if user.userprofile.phone %}
                                                <br><small class="text-muted">{{ user.userprofile.phone }}</small>
                                            {% endif %}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <small class="text-muted">{{ user.date_joined|date:"Y-m-d H:i" }}</small>
                                </td>
                                <td>
                                    {% if user.last_login %}
                                        <small class="text-muted">{{ user.last_login|date:"Y-m-d H:i" }}</small>
                                    {% else %}
                                        <small class="text-muted">从未登录</small>
                                    {% endif %}
                                </td>
                                <td>
                                    <span class="badge bg-info badge-admin">{{ user.order_set.count }}</span>
                                </td>
                                <td>
                                    {% if user.is_active %}
                                        <span class="badge bg-success badge-admin">
                                            <i class="fas fa-check me-1"></i>活跃
                                        </span>
                                    {% else %}
                                        <span class="badge bg-danger badge-admin">
                                            <i class="fas fa-ban me-1"></i>禁用
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if user.is_staff %}
                                        <span class="badge bg-warning text-dark badge-admin">
                                            <i class="fas fa-crown me-1"></i>管理员
                                        </span>
                                    {% else %}
                                        <span class="badge bg-secondary badge-admin">
                                            <i class="fas fa-user me-1"></i>普通用户
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-outline-warning" 
                                                onclick="toggleUserStatus({{ user.id }}, '{{ user.username }}')"
                                                title="切换状态">
                                            {% if user.is_active %}
                                                <i class="fas fa-ban"></i>
                                            {% else %}
                                                <i class="fas fa-check"></i>
                                            {% endif %}
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-info" 
                                                onclick="toggleUserRole({{ user.id }}, '{{ user.username }}')"
                                                title="切换权限">
                                            {% if user.is_staff %}
                                                <i class="fas fa-user"></i>
                                            {% else %}
                                                <i class="fas fa-crown"></i>
                                            {% endif %}
                                        </button>
                                        {% if not user.is_staff %}
                                            <button type="button" class="btn btn-sm btn-outline-danger" 
                                                    onclick="deleteUser({{ user.id }}, '{{ user.username }}')"
                                                    title="删除用户">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% else %}
    <div class="admin-card">
        <div class="card-body text-center py-5">
            <i class="fas fa-users fa-4x text-muted mb-4"></i>
            <h4 class="text-muted mb-3">暂无用户信息</h4>
            <p class="text-muted">系统中还没有注册用户</p>
        </div>
    </div>
{% endif %}

<!-- 用户统计 -->
{% if users %}
    <div class="admin-card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-chart-pie me-2"></i>用户统计</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-users fa-2x text-primary mb-2"></i>
                        <h5 class="mb-1">{{ users|length }}</h5>
                        <small class="text-muted">总用户数</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-user-check fa-2x text-success mb-2"></i>
                        <h5 class="mb-1">{{ users|length|add:"-1" }}</h5>
                        <small class="text-muted">活跃用户</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-crown fa-2x text-warning mb-2"></i>
                        <h5 class="mb-1">1</h5>
                        <small class="text-muted">管理员</small>
                    </div>
                </div>
                <div class="col-md-3 text-center mb-3">
                    <div class="border rounded p-3">
                        <i class="fas fa-calendar-day fa-2x text-info mb-2"></i>
                        <h5 class="mb-1">{{ today_new_users }}</h5>
                        <small class="text-muted">今日新用户</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// 筛选功能
document.getElementById('statusFilter').addEventListener('change', filterUsers);
document.getElementById('roleFilter').addEventListener('change', filterUsers);
document.getElementById('userSearch').addEventListener('input', filterUsers);

function filterUsers() {
    const statusFilter = document.getElementById('statusFilter').value;
    const roleFilter = document.getElementById('roleFilter').value;
    const searchTerm = document.getElementById('userSearch').value.toLowerCase();
    
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const status = row.dataset.status;
        const role = row.dataset.role;
        const text = row.textContent.toLowerCase();
        
        const statusMatch = !statusFilter || status === statusFilter;
        const roleMatch = !roleFilter || role === roleFilter;
        const searchMatch = !searchTerm || text.includes(searchTerm);
        
        if (statusMatch && roleMatch && searchMatch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// 切换用户状态
function toggleUserStatus(userId, username) {
    const action = confirm(`确定要切换用户"${username}"的状态吗？`);
    if (action) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="toggle_active">
            <input type="hidden" name="user_id" value="${userId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

// 切换用户权限
function toggleUserRole(userId, username) {
    const action = confirm(`确定要切换用户"${username}"的管理员权限吗？`);
    if (action) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="toggle_staff">
            <input type="hidden" name="user_id" value="${userId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

// 删除用户
function deleteUser(userId, username) {
    const action = confirm(`确定要删除用户"${username}"吗？此操作不可恢复！`);
    if (action) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="user_id" value="${userId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}
</script>
{% endblock %} 